<template>
	<view class="work-container">
		<!-- 导航 -->
		<view>
			<view class="rljs-img">
				<upload @urlArr="rtjsImg" ref="child"></upload>
			</view>
			<view class="rljs-list">
				<uni-forms ref="baseForm" :modelValue="form" label-width="200rpx">
					<uni-forms-item :label="$t('search:captureCamera')">
						<!-- <view @click="equipment(1)" class="sbBox">
							{{nodeListCopy}}
						</view> -->
						<view @click="handleDevicesOpen" class="sbBox">
							{{nodeListCopy}}
						</view>
					</uni-forms-item>
					<uni-forms-item :label="$t('search:startTime')">
						<uni-datetime-picker type="datetime" return-type="timestamp" v-model="form.captureTimeB" />
					</uni-forms-item>
					<uni-forms-item :label="$t('search:endTime')">
						<uni-datetime-picker type="datetime" return-type="timestamp" v-model="form.captureTimeE" />
					</uni-forms-item>
					<uni-forms-item :label="$t('search:threshold')">
						<uni-easyinput @focus="hideTabbar" @blur="showTabbar" v-model="form.thresholdMin" maxlength="3"
							:placeholder="$t('search:enterThreshold')" />
					</uni-forms-item>
				</uni-forms>
			</view>
			<view class="btn">
				<button type="primary" v-if="tabbar" @click="jump(3)">{{ $t('search:search') }}</button>
			</view>
		</view>
		
		<devicesTree ref='devicesTree' @onOk="setDevides" />
	</view>
</template>

<script>
	import upload from "@/components/upload/index.vue"
	import devicesTree from '@/components/devicesTree/devicesTree.vue'
	
	export default {
		components: {
			upload,
			devicesTree
		},
		data() {
			return {
				msgType: '',
				form: {
					captureTimeB: "",
					captureTimeE: "",
					currentPage: 1,
					imgList: [],
					// nodeList: [],
					devicesTree: [],
					pageSize: 20,
					searchType: 1,
					thresholdMax: 1,
					thresholdMin: "75",
					totalRows: 0,
				},
				nodeListCopy: this.$t('search:pleaseSelect'),
				dataTree: [],
				tabbar: true,
				windowHeight: ''
			}
		},
		onLoad(e) {
			if (e.param != null) {
				var param = JSON.parse(e.param)
				if (param.imgUrl != null && param.imgUrl != '') {
					this.form.imgList = [param.imgUrl]
					var arr = []
					var img = {
						showUrl: param.imgUrl,
						from: 1
					}
					arr.push(img)
					this.$nextTick(() => {
						this.$refs.child.setFileList(arr)
					})
				}
			}


			// 一天的毫秒数
			const MillisecondsADay = 24 * 60 * 60 * 1000 * 1
			// 当前时间戳
			var timestamp = Date.parse(new Date());
			// 昨天时间戳
			var timestampStart = timestamp - MillisecondsADay;
			var timestampEnd = timestamp + 30 * 60 * 1000
			this.form.captureTimeE = timestampEnd
			this.form.captureTimeB = timestampStart

			uni.getSystemInfo({
				success: (res) => {
					this.windowHeight = res.windowHeight;
				}
			});
			uni.onWindowResize((res) => {
				if (res.size.windowHeight < this.windowHeight) {
					this.tabbar = false
				} else {
					this.tabbar = true
				}
			})
		},
		methods: {
			showTabbar() {
				this.tabbar = true;
			},
			hideTabbar() {
				this.tabbar = false;
			},
			// 人体检索图片
			rtjsImg(e) {
				if (e != null) {
					let arr = []
					arr.push(e)
					this.form.imgList = arr
				} else {
					this.form.imgList = []
				}
			},
			// 设备选择
			equipment(index) {
				uni.navigateTo({
					url: `/pages/shebei/index?type=${index}`
				})
			},
			jump(index) {
				uni.navigateTo({
					url: `/pages/search/jsjg/index?data=${encodeURIComponent(JSON.stringify(this.form))}&type=${index}`
				})
			},
			handleDevicesOpen() {
			    this.$refs.devicesTree.open()
			},
			setDevides(id, labels) {
			    this.form.devicesTree = id
			    this.nodeListCopy = labels || this.$t('search:pleaseSelect')
			},
		},
	}
</script>

<style scoped>
	page {
		background-color: #fff;
	}

	.rljs-nav {
		width: 750rpx;
		height: 80rpx;
		background-color: #f1f1f1;
		display: flex;
		justify-content: space-evenly;
	}

	.rljs-title {
		line-height: 80rpx;
	}

	.active {
		line-height: 80rpx;
		color: #0081ff;
		border-bottom: 2px solid #0081ff;
	}

	.rljs-img {
		padding: 40rpx 0;
	}

	.rljs-img>>>.file-picker__box {
		position: relative;
		width: 40%;
		height: 0;
		margin: auto;
		padding-top: 40%;
		box-sizing: border-box;
	}

	.rljs-list {
		padding: 0rpx 60rpx;
	}

	.rljs-list .uni-forms-item {
		border-bottom: 1px solid #dedede;
		margin-bottom: 0rpx;
		padding: 5rpx 0;
	}

	.rljs-list>>>.uni-input-input {
		color: #333;
	}

	.rljs-list>>>.input-value-border {
		border: none;
	}

	.rljs-list>>>.uni-text {
		display: none;
	}

	.rljs-list>>>.placeholder {
		font-size: 28rpx;
	}

	.rljs-list>>>.uni-date-x--border {
		border: none;
	}

	.rljs-list>>>.uni-icons {
		display: none;
	}

	.rljs-list>>>.is-input-border {
		border: none;
	}

	.rljs-list>>>.uni-easyinput__placeholder-class {
		font-size: 28rpx;
	}

	.rljs-list>>>.uni-date__x-input {
		padding: 0;
	}

	.btn {
		position: absolute;
		bottom: 0;
		width: 750rpx;
	}

	.btn button {
		margin: 50rpx 50rpx;
		font-size: 30rpx;
	}

	.rljs-img>>>.imgClass {
		width: 250rpx;
		height: 350rpx;
		margin: 0 auto;
	}

	.sbBox {
		width: 428rpx;
		line-height: 72rpx;
		padding: 0 10rpx 0 20rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
</style>